
<template>
  <div class="createvip">
    <p class="head-p">会员卡基本信息</p>
    <hr />
    <p class="name-p">店铺名称: GAOGAO的小店</p>
    <p class="logo-p">
      店铺logo: <img src="../assets/img/youzan.png" alt="" /><span
        ><el-alert title="如需修改店铺信息,请在店铺设置中更新" type="info">
        </el-alert
      ></span>
    </p>
    <div class="block">
      <span>卡片封面:</span>
      <span class="demonstration">背景色</span>
      <div class="block-dem">
        <el-color-picker v-model="card.color1"></el-color-picker>
      </div>
    </div>
    <!-- 上传图片 -->
    <div class="el-upload-div">
      <span>背景图片:</span>
      <div class="el-div">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="card.imageUrl" :src="card.imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
    <div class="el-alert-ti">
      <el-alert title="小于2M，只限于jpg格式" type="info"> </el-alert>
    </div>
    <div class="divv">
      <span>会员卡名称:</span
      ><input type="text" placeholder="最多可输入9个字符" v-model="card.name" />
    </div>
    <div class="alert-div">
      <el-alert title="会员卡名称保存成功后不支持修改" type="info"> </el-alert>
    </div>
    <div class="form-div">
      <form action="">
        <span>会员权益:</span>
        <div class="radio-div">
          <p>
            <input type="radio" value="baoyou" v-model="card.title" /><span
              >包邮</span
            >
          </p>
          <p>
            <input type="radio" value="zhekou" v-model="card.title" /><span
              >折扣</span
            >
          </p>
          <p>
            <input type="radio" value="jifen" v-model="card.title" /><span
              >积分</span
            >
          </p>
        </div>
        <p>
          <span class="span-s">使用须知:</span
          ><textarea
            name=""
            id=""
            cols="30"
            rows="10"
            placeholder="会员卡会根据您上文的勾选情况自动生成，此处可填写其它补充信息以便会员知晓"
          ></textarea>
        </p>
        <div class="divvv">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </div>
      </form>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.divvv {
  margin-left: 400px;
  margin-top: 30px;
}
.span-s {
  display: block;
}
textarea {
  margin-left: 80px;
  height: 120px;
  margin-top: -20px;
  width: 300px;
  border: 1px solid rgba(63, 59, 59, 0.185);
  border-radius: 5%;
}
.radio-div {
  margin-left: 70px;
}
.form-div {
  margin-top: 50px;
  margin-left: 40px;
  line-height: 30px;
}
.alert-div {
  width: 300px;
  height: 10px;
  margin-top: 5px;
  margin-left: 120px;
}
.divv {
  margin-top: 50px;
  margin-left: 40px;
  input {
    height: 28px;
    border: 1px solid rgba(63, 59, 59, 0.185);
    border-radius: 5%;
    width: 200px;
  }
}
.el-alert-ti {
  width: 280px;
  margin-left: 280px;
  margin-top: -50px;
}
.el-div {
  margin-left: 80px;
}
.el-upload-div {
  margin-left: 40px;
}
.createvip {
  .block {
    margin-left: 40px;
    margin-top: 35px;
    .block-dem {
      margin-top: -25px;
      margin-left: 130px;
    }
  }

  height: 900px;
  width: 600px;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
  .head-p {
    height: 40px;
    line-height: 40px;
  }
  .name-p {
    margin-left: 40px;
    margin-top: 20px;
  }
  .logo-p {
    span {
      position: absolute;
      top: 30px;
      font-size: 10px;
      color: rgba(174, 166, 184);
      width: 400px;
    }
    position: relative;
    margin-left: 40px;
    margin-top: 20px;
    height: 40px;
    img {
      position: absolute;
      width: 30px;
      height: 30px;
      top: -5px;
    }
  }
}
</style>
<style >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 140px;
  height: 140px;
  display: block;
}

.el-color-picker__trigger {
  width: 100px;
}
</style>
<script>
export default {
  data() {
    return {
      color2: null,
      card: {
        name: "",
        title: "",
        color1: "",
        imageUrl: "",
      },
    };
  },
  methods: {
    onSubmit() {
      if (this.card.name) {
        this.$store.commit("cusStore/creatCard", this.card);
        this.$message.success("创建成功!");
      } else {
        this.$message.error("创建失败,必须要有名字!");
      }
    },
    handleAvatarSuccess(res, file) {
      this.card.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.$store.state.cusStore.imageUrl);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>